<script setup>
import { ref, reactive, provide, inject, computed, onMounted } from 'vue'
import { useCounterStore } from '../../stores/counter.js'

// Pinia store
const counterStore = useCounterStore()

// Props 通信示例数据
const parentMessage = ref('来自父组件的消息')
const userInfo = reactive({
  name: '张三',
  age: 25,
  role: '开发者'
})

// 自定义事件示例数据
const childMessages = ref([])
const eventCount = ref(0)

// Provide/Inject 示例数据
const themeConfig = reactive({
  primaryColor: '#4facfe',
  fontSize: '16px',
  darkMode: false
})

// 提供数据给子组件
provide('theme', themeConfig)
provide('userInfo', userInfo)

// Refs 通信示例
const childComponentRef = ref(null)
const refMessage = ref('')
const count = ref(0)

// 方法
const updateParentMessage = () => {
  parentMessage.value = `更新时间: ${new Date().toLocaleTimeString()}`
}

const handleChildEvent = (data) => {
  childMessages.value.push({
    id: Date.now(),
    message: data.message,
    timestamp: new Date().toLocaleTimeString()
  })
  eventCount.value++
}

const callChildMethod = () => {
  if (childComponentRef.value) {
    // const result = childComponentRef.value.getChildData()
    refMessage.value = `通过 ref 获取到: ${count.value}`
  }
  // 增加子组件的计数
  count.value++
}

const toggleTheme = () => {
  themeConfig.darkMode = !themeConfig.darkMode
  themeConfig.primaryColor = themeConfig.darkMode ? '#764ba2' : '#4facfe'
}

const clearMessages = () => {
  childMessages.value = []
  eventCount.value = 0
}

// Pinia重置方法兼容 - 针对setup语法的store
function resetStore() {
  // setup语法的store没有自动的$reset方法
  // 直接重置count属性
  counterStore.count = 0
}
</script>

<template>
  <div class="component-communication">
    <!-- 页面标题 -->
    <div class="header">
      <h1 class="title">💬 Vue 组件通信</h1>
      <p class="subtitle">掌握组件间数据传递和通信的各种方式</p>
    </div>

    <!-- 通信方式概览 -->
    <div class="section">
      <h2 class="section-title">📋 通信方式概览</h2>
      <div class="communication-grid">
        <div class="comm-card props">
          <div class="comm-icon">📥</div>
          <h3>Props</h3>
          <p>父组件向子组件传递数据</p>
          <span class="comm-direction">父 → 子</span>
        </div>
        
        <div class="comm-card events">
          <div class="comm-icon">📤</div>
          <h3>自定义事件</h3>
          <p>子组件向父组件发送消息</p>
          <span class="comm-direction">子 → 父</span>
        </div>
        
        <div class="comm-card provide">
          <div class="comm-icon">🌐</div>
          <h3>Provide/Inject</h3>
          <p>跨层级组件数据共享</p>
          <span class="comm-direction">祖先 → 后代</span>
        </div>
        
        <div class="comm-card refs">
          <div class="comm-icon">🔗</div>
          <h3>Refs</h3>
          <p>直接访问子组件实例</p>
          <span class="comm-direction">父 ↔ 子</span>
        </div>
        
        <div class="comm-card pinia">
          <div class="comm-icon">🏪</div>
          <h3>Pinia</h3>
          <p>全局状态管理</p>
          <span class="comm-direction">全局共享</span>
        </div>
      </div>
    </div>

    <!-- Props 通信 -->
    <div class="section">
      <h2 class="section-title">📥 Props 通信 (父 → 子)</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>父组件代码</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { ref, reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

const message = ref('来自父组件的消息')
const userInfo = reactive({
  name: '张三',
  age: 25,
  role: '开发者'
})
&lt;/script&gt;

&lt;template&gt;
  &lt;ChildComponent 
    :message="message"
    :user="userInfo"
    :count="42"
  /&gt;
&lt;/template&gt;</code></pre>
          
          <h3>子组件代码</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
// 定义 props
const props = defineProps({
  message: String,
  user: Object,
  count: {
    type: Number,
    default: 0
  }
})
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt; props.message&lt;/p&gt;
    &lt;p&gt;用户:  props.user.name }}&lt;/p&gt;
    &lt;p&gt;计数:props.count &lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <div class="parent-component">
              <h4>父组件</h4>
              <button class="demo-btn primary" @click="updateParentMessage">
                更新消息
              </button>
              
              <!-- 模拟子组件 -->
              <div class="child-component">
                <h5>子组件接收到的数据:</h5>
                <div class="props-display">
                  <p><strong>消息:</strong> {{ parentMessage }}</p>
                  <p><strong>用户:</strong> {{ userInfo.name }} ({{ userInfo.age }}岁)</p>
                  <p><strong>角色:</strong> {{ userInfo.role }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 Props 特点</h4>
        <ul>
          <li>单向数据流：数据从父组件流向子组件</li>
          <li>响应式：父组件数据变化时，子组件会自动更新</li>
          <li>类型验证：可以定义 prop 的类型和默认值</li>
          <li>只读：子组件不应该直接修改 props</li>
        </ul>
      </div>
    </div>

    <!-- 自定义事件通信 -->
    <div class="section">
      <h2 class="section-title">📤 自定义事件通信 (子 → 父)</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>子组件代码</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
// 定义事件
const emit = defineEmits(['update', 'delete', 'custom-event'])

const sendMessage = () => {
  emit('update', {
    message: '来自子组件的消息',
    timestamp: Date.now()
  })
}

const handleClick = () => {
  emit('custom-event', { action: 'clicked' })
}
&lt;/script&gt;

&lt;template&gt;
  &lt;button @click="sendMessage"&gt;发送消息&lt;/button&gt;
  &lt;button @click="handleClick"&gt;触发事件&lt;/button&gt;
&lt;/template&gt;</code></pre>
          
          <h3>父组件代码</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
const handleUpdate = (data) => {
  console.log('收到更新:', data)
}

const handleCustomEvent = (data) => {
  console.log('自定义事件:', data)
}
&lt;/script&gt;

&lt;template&gt;
  &lt;ChildComponent 
    @update="handleUpdate"
    @custom-event="handleCustomEvent"
  /&gt;
&lt;/template&gt;</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <div class="event-demo">
              <div class="child-simulator">
                <h5>模拟子组件</h5>
                <button 
                  class="demo-btn success" 
                  @click="handleChildEvent({ message: '子组件消息 ' + (eventCount + 1) })"
                >
                  发送消息给父组件
                </button>
              </div>
              
              <div class="parent-receiver">
                <h5>父组件接收到的消息 ({{ eventCount }} 条):</h5>
                <div class="message-list">
                  <div 
                    v-for="msg in childMessages.slice(-3)" 
                    :key="msg.id"
                    class="message-item"
                  >
                    <span class="message-text">{{ msg.message }}</span>
                    <span class="message-time">{{ msg.timestamp }}</span>
                  </div>
                  <div v-if="childMessages.length === 0" class="no-messages">
                    暂无消息
                  </div>
                </div>
                <button class="demo-btn warning" @click="clearMessages">
                  清空消息
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 自定义事件特点</h4>
        <ul>
          <li>子组件主动向父组件发送数据</li>
          <li>事件名推荐使用 kebab-case</li>
          <li>可以传递任意数据作为事件参数</li>
          <li>父组件通过 @event-name 监听事件</li>
        </ul>
      </div>
    </div>

    <!-- Provide/Inject 通信 -->
    <div class="section">
      <h2 class="section-title">🌐 Provide/Inject 通信 (跨层级)</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>祖先组件 (Provide)</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { provide, reactive } from 'vue'

const themeConfig = reactive({
  primaryColor: '#4facfe',
  fontSize: '16px',
  darkMode: false
})

const userInfo = reactive({
  name: '张三',
  role: '管理员'
})

// 提供数据
provide('theme', themeConfig)
provide('userInfo', userInfo)
&lt;/script&gt;</code></pre>
          
          <h3>后代组件 (Inject)</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { inject } from 'vue'

// 注入数据
const theme = inject('theme')
const userInfo = inject('userInfo')

// 带默认值的注入
const config = inject('config', { 
  defaultValue: 'default' 
})
&lt;/script&gt;

&lt;template&gt;
  &lt;div :style="{ color: theme.primaryColor }"&gt;
    &lt;p&gt;用户:  userInfo.name &lt;/p&gt;
    &lt;p&gt;主题色: theme.primaryColor &lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <div class="provide-demo">
              <div class="ancestor-component">
                <h5>祖先组件 (Provide)</h5>
                <button class="demo-btn info" @click="toggleTheme">
                  切换主题 ({{ themeConfig.darkMode ? '暗色' : '亮色' }})
                </button>
                
                <!-- 模拟中间层组件 -->
                <div class="middle-component">
                  <h6>中间组件 (不需要传递 props)</h6>
                  
                  <!-- 模拟后代组件 -->
                  <div 
                    class="descendant-component"
                    :style="{ 
                      backgroundColor: themeConfig.darkMode ? '#333' : '#f0f0f0',
                      color: themeConfig.darkMode ? '#fff' : '#333',
                      borderColor: themeConfig.primaryColor
                    }"
                  >
                    <h6>后代组件 (Inject)</h6>
                    <p>主题色: {{ themeConfig.primaryColor }}</p>
                    <p>用户: {{ userInfo.name }}</p>
                    <p>模式: {{ themeConfig.darkMode ? '暗色模式' : '亮色模式' }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 Provide/Inject 特点</h4>
        <ul>
          <li>跨层级传递数据，无需逐层传递 props</li>
          <li>祖先组件提供数据，任意后代组件都可以注入</li>
          <li>支持响应式数据</li>
          <li>适合主题、用户信息等全局配置</li>
        </ul>
      </div>
    </div>

    <!-- Refs 通信 -->
    <div class="section">
      <h2 class="section-title">🔗 Refs 通信 (直接访问)</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>父组件代码</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

const callChildMethod = () => {
  // 直接调用子组件方法
  const result = childRef.value.getChildData()
  console.log(result)
  
  // 访问子组件数据
  console.log(childRef.value.childMessage)
}
&lt;/script&gt;

&lt;template&gt;
  &lt;ChildComponent ref="childRef" /&gt;
  &lt;button @click="callChildMethod"&gt;
    调用子组件方法
  &lt;/button&gt;
&lt;/template&gt;</code></pre>
          
          <h3>子组件代码</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { ref } from 'vue'

const childMessage = ref('子组件的数据')
const count = ref(0)

// 暴露给父组件的方法和数据
defineExpose({
  getChildData: () => {
    return `子组件数据: ${childMessage.value}, 计数: ${count.value}`
  },
  childMessage,
  count,
  updateCount: () => {
    count.value++
  }
})
&lt;/script&gt;</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <div class="refs-demo">
              <div class="parent-refs">
                <h5>父组件</h5>
                <button class="demo-btn warning" @click="callChildMethod">
                  通过 ref 调用子组件方法
                </button>
                <div class="ref-result">
                  <p>{{ refMessage || '点击按钮获取子组件数据' }}</p>
                </div>
              </div>
              
              <!-- 模拟子组件 -->
              <div class="child-refs" ref="childComponentRef">
                <h5>子组件</h5>
                <p>内部计数: {{ count }} 次按钮。</p>
                <button class="demo-btn success" @click="count++">
                  增加计数
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 Refs 特点</h4>
        <ul>
          <li>父组件可以直接访问子组件的方法和数据</li>
          <li>需要使用 defineExpose 暴露子组件的内容</li>
          <li>破坏了组件的封装性，应谨慎使用</li>
          <li>适合需要直接控制子组件的场景</li>
        </ul>
      </div>
    </div>

    <!-- Pinia 状态管理 -->
    <div class="section">
      <h2 class="section-title">🏪 Pinia 状态管理 (全局共享)</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>Store 定义</h3>
          <pre class="code-block"><code>// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Counter Store'
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2
  },
  
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})</code></pre>
          
          <h3>组件中使用</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()

// 直接访问状态
console.log(counterStore.count)

// 调用 actions
const increment = () => {
  counterStore.increment()
}
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;计数: counterStore.count &lt;/p&gt;
    &lt;p&gt;双倍:  counterStore.doubleCount&lt;/p&gt;
    &lt;button @click="increment"&gt;增加&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <div class="pinia-demo">
              <div class="store-display">
                <h5>Pinia Store 状态</h5>
                <div class="store-info">
                  <p><strong>计数:</strong> {{ counterStore.count }}</p>
                  <p><strong>双倍:</strong> {{ counterStore.doubleCount }}</p>
                  <p><strong>Store名:</strong> {{ counterStore.name }}</p>
                </div>
                
                <div class="store-controls">
                  <button class="demo-btn success" @click="counterStore.increment()">
                    +1
                  </button>
                  <button class="demo-btn warning" @click="counterStore.decrement()">
                    -1
                  </button>
                  <button class="demo-btn info" @click="resetStore">
                    重置
                  </button>
                </div>
              </div>
              
              <div class="store-note">
                <p>💡 这个状态在所有组件中都是共享的</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 Pinia 特点</h4>
        <ul>
          <li>全局状态管理，所有组件都可以访问</li>
          <li>支持 TypeScript，类型安全</li>
          <li>开发工具支持，便于调试</li>
          <li>适合复杂应用的状态管理</li>
        </ul>
      </div>
    </div>

    <!-- 通信方式选择指南 -->
    <div class="section">
      <h2 class="section-title">🎯 通信方式选择指南</h2>
      <div class="guide-grid">
        <div class="guide-card">
          <h4>🔸 Props + Events</h4>
          <p><strong>适用场景:</strong></p>
          <ul>
            <li>父子组件直接通信</li>
            <li>简单的数据传递</li>
            <li>组件层级较浅</li>
          </ul>
        </div>
        
        <div class="guide-card">
          <h4>🔸 Provide/Inject</h4>
          <p><strong>适用场景:</strong></p>
          <ul>
            <li>跨多层级的组件通信</li>
            <li>主题、配置等全局数据</li>
            <li>避免 props 逐层传递</li>
          </ul>
        </div>
        
        <div class="guide-card">
          <h4>🔸 Refs</h4>
          <p><strong>适用场景:</strong></p>
          <ul>
            <li>需要直接调用子组件方法</li>
            <li>访问子组件的 DOM 元素</li>
            <li>紧急情况下的直接访问</li>
          </ul>
        </div>
        
        <div class="guide-card">
          <h4>🔸 Pinia</h4>
          <p><strong>适用场景:</strong></p>
          <ul>
            <li>复杂的全局状态管理</li>
            <li>多个组件需要共享状态</li>
            <li>需要状态持久化</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 练习任务 -->
    <div class="section">
      <h2 class="section-title">🎯 练习任务</h2>
      <div class="exercise-list">
        <div class="exercise-item">
          <h4>任务 1: Props 传递</h4>
          <p>创建一个商品卡片组件，通过 props 接收商品信息并展示</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 2: 事件通信</h4>
          <p>创建一个评分组件，点击星星时向父组件发送评分事件</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 3: 跨层级通信</h4>
          <p>使用 provide/inject 实现一个主题切换功能</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 4: 状态管理</h4>
          <p>使用 Pinia 创建一个购物车状态管理</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-communication {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

/* 页面头部 */
.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 章节样式 */
.section {
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
}

/* 通信方式网格 */
.communication-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.comm-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.comm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.comm-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.comm-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.comm-card p {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.comm-direction {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
}

/* 演示容器 */
.demo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.code-demo, .live-demo {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

.code-demo h3, .live-demo h3 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.code-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-x: auto;
  margin: 0 0 15px 0;
}

.demo-area {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
}

/* 按钮样式 */
.demo-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 5px 5px 0;
}

.demo-btn.primary {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
}

.demo-btn.secondary {
  background: linear-gradient(45deg, #a8edea, #fed6e3);
  color: #333;
}

.demo-btn.success {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  color: white;
}

.demo-btn.warning {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  color: white;
}

.demo-btn.info {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Props 演示 */
.parent-component {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.child-component {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  border-left: 4px solid #4facfe;
}

.props-display p {
  margin: 5px 0;
  font-size: 0.9rem;
}

/* 事件演示 */
.event-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.child-simulator, .parent-receiver {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
}

.message-list {
  max-height: 120px;
  overflow-y: auto;
  margin: 10px 0;
}

.message-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-text {
  font-size: 0.85rem;
}

.message-time {
  font-size: 0.75rem;
  opacity: 0.7;
}

.no-messages {
  text-align: center;
  opacity: 0.7;
  font-style: italic;
  padding: 20px;
}

/* Provide/Inject 演示 */
.provide-demo {
  text-align: center;
}

.ancestor-component {
  border: 2px dashed #4facfe;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.middle-component {
  border: 2px dashed #a8e6cf;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
}

.descendant-component {
  border: 2px solid;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  transition: all 0.3s ease;
}

/* Refs 演示 */
.refs-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.parent-refs, .child-refs {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
}

.ref-result {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
  min-height: 40px;
}

/* Pinia 演示 */
.pinia-demo {
  text-align: center;
}

.store-display {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

.store-info {
  margin-bottom: 15px;
}

.store-info p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.store-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.store-note {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px;
  font-style: italic;
}

/* 信息框 */
.info-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #4facfe;
}

.info-box h4 {
  margin: 0 0 10px 0;
  color: #4facfe;
}

.info-box ul {
  margin: 0;
  padding-left: 20px;
}

.info-box li {
  margin-bottom: 5px;
  font-size: 0.9rem;
}

/* 指南网格 */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.guide-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.guide-card h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: #4facfe;
}

.guide-card p {
  margin: 0 0 10px 0;
  font-weight: bold;
  font-size: 0.9rem;
}

.guide-card ul {
  margin: 0;
  padding-left: 20px;
}

.guide-card li {
  margin-bottom: 5px;
  font-size: 0.85rem;
}

/* 练习任务 */
.exercise-list {
  display: grid;
  gap: 15px;
}

.exercise-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #56ab2f;
}

.exercise-item h4 {
  margin: 0 0 10px 0;
  color: #a8e6cf;
}

.exercise-item p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .component-communication {
    padding: 15px;
  }
  
  .demo-container {
    grid-template-columns: 1fr;
  }
  
  .communication-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .guide-grid {
    grid-template-columns: 1fr;
  }
  
  .event-demo {
    grid-template-columns: 1fr;
  }
  
  .refs-demo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 2rem;
  }
  
  .section {
    padding: 20px;
  }
  
  .communication-grid {
    grid-template-columns: 1fr;
  }
  
  .store-controls {
    flex-direction: column;
    align-items: center;
  }
}
</style>